<template>
    <div id="apphomes">
        <!--工具栏目-->
        <el-col :span="24" class="toolbar">
            <el-button type="info" @click="handleAdd">新增</el-button>
            <el-button type="info" @click="dialogShowStyleVisible = true">查看模块样式</el-button>
        </el-col>
        <el-table :data="moduleList" style="width: 100%" border :default-sort="{prop: 'sort'}" v-loading="loading">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" sortable>
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.sort" placeholder="请输入内容"
                              @blur="inputSort(scope.$index, scope.row)"
                              @focus="inputFocus(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题">
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.title" placeholder="请输入标题"
                              @blur="inputTitle(scope.row)"
                              @focus="inputFocusTitle(scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="moduleType" label="类型">
                <template slot-scope="scope">
                    <div>
                        <p v-if="scope.row.moduleType === 'slide'">幻灯片</p>
                        <p v-else-if="scope.row.moduleType === 'notice'">公告</p>
                        <p v-else-if="scope.row.moduleType === 'icon'">图标</p>
                        <p v-else-if="scope.row.moduleType === 'education'">教育</p>
                        <p v-else-if="scope.row.moduleType === 'securityOpen'">证券开户</p>
                        <p v-else-if="scope.row.moduleType === 'product'">金融产品</p>
                        <p v-else-if="scope.row.moduleType === 'customer'">自定义</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="图标(点击可编辑)">
                <template slot-scope='scope'>
                    <div class="iconImg">
                        <div class="iconImg" @click="photoDia(scope.row)">
                            <img v-if="scope.row.iconFull.path" :src='scope.row.iconFull.path'
                                 class="mainImg">
                            <span v-else>暂未有图片</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="更多(点击可编辑)">
                <template slot-scope="scope">
                    <div class="homeType" @click="openDia(scope.$index, scope.row)">
                        <p v-if="scope.row.type === 0">不操作</p>
                        <p v-else-if="scope.row.type === 1">打开链接</p>
                        <p v-else-if="scope.row.type === 10">打开分析列表</p>
                        <p v-else-if="scope.row.type === 11">打开分析详情</p>
                        <p v-else-if="scope.row.type === 20">打开课节详情</p>
                        <p v-else-if="scope.row.type === 21">打开课程列表</p>
                        <p v-else-if="scope.row.type === 22">自定义课程列表</p>
                        <p v-else-if="scope.row.type === 30">打开活动列表</p>
                        <p v-else-if="scope.row.type === 31">打开学股堂</p>
                        <p v-else-if="scope.row.type === 32">打开模拟炒股</p>
                        <p v-else-if="scope.row.type === 40">打开证券开户列表</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="选择样式" width="130">
                <template slot-scope="scope">
                    <p v-if="scope.row.moduleType !== 'customer'">固定样式</p>
                    <el-select v-else v-model="scope.row.style" placeholder="请选择样式" @change="chooseStyle(scope.row)">
                        <el-option v-for="item in styleList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="开关" width="94">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :on-value="0" :off-value="1"
                               @change="tableStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="primary" icon="edit" size="small" @click="skip(scope.row)"></el-button>
                    <el-button v-if="scope.row.moduleType === 'customer'" type="primary" icon="delete" size="small"
                               @click="skipDel(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="更改类型" :visible.sync="dialogTableVisible" :before-close="dialogCan" size="small">
            <type :message="messages" v-if="messages"></type><!--子组件. 传过去一个messages-->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ensure">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="更改图片" :visible.sync="dialogTableVisible1" :before-close="dialogCan" size="tiny">
            <el-upload
                    class="avatar-uploader"
                    :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">图片尺寸：90 X 90</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ensureS">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增模块" :visible.sync="dialogTableAdd" :before-close="dialogCan" size="small">
            <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                <el-form-item label="模块标题" prop="title">
                    <el-input v-model="addForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="模块排序" prop="sort">
                    <el-input type="number" v-model="addForm.sort" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                            class="avatar-uploader"
                            :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessAdd"
                            :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                        <img v-if="imageUrlAdd" :src="imageUrlAdd" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">图片尺寸：90 X 90</div>
                    </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSure">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="模块样式展示" :visible.sync="dialogShowStyleVisible" size="tiny">
            <el-collapse v-model="viewStyleActiveName" accordion class="collapse">
                <el-collapse-item title="样式一" name="1">
                    <img src="http://luobo-finance.oss-cn-hangzhou.aliyuncs.com/app/d66ace4a-c818-4d43-9586-e74bea16e5a6.jpg">
                </el-collapse-item>
                <el-collapse-item title="样式二" name="2">
                    <img src="http://luobo-finance.oss-cn-hangzhou.aliyuncs.com/app/daaee6d6-e10f-4dd2-9dca-e012487c76ed.jpg">
                </el-collapse-item>
                <el-collapse-item title="样式三" name="3">
                    <img src="http://luobo-finance.oss-cn-hangzhou.aliyuncs.com/app/d2cbc4d4-32c1-41fe-a62a-82f870a495ea.jpg">
                </el-collapse-item>
            </el-collapse>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogShowStyleVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import chooseType from '../../common/js/type';
    import {mapState, mapMutations} from 'vuex';
    import {moduleSetting, moduleUpdate, moduleAdd, moduleDelete, moduleAdd1} from '../../api/api';
    import type from './type.vue';

    export default {
        data() {
            return {
                viewStyleActiveName:1,
                moduleList: [],
                dialogTableVisible: false,
                dialogTableVisible1: false,
                dialogShowStyleVisible: false,
                messages: null,
                input: null,
                loading: false,
                sortNum: null,
                checkTitle:null,
                imageUrl: '',
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                photoPic: {},
                fall: [],
                dialogTableAdd: false,
                addForm: {
                    title: '',
                    sort: '99',
                    status: 1,
                    type: 0,
                    value: '',
                    icon: {
                        path: ''
                    }
                },
                addFormRules: {},
                imageUrlAdd: '',
                styleList: [{
                    value: 1,
                    label: '样式一'
                }, {
                    value: 2,
                    label: '样式二'
                }, {
                    value: 3,
                    label: '样式三'
                }],
            }
        },
        methods: {
            ...mapMutations(['typeListFile']),
            moduleSettings() {
                let para = {};
                this.loading = true;
                moduleSetting(para).then((res) => {
                    this.loading = false;
                    this.moduleList = res.data.list;
                    this.typeListFile(res.data.typeList);
                    console.log(res);
                })
            },
            dialogCan(done) {
                this.dialogTableVisible = false;
                this.moduleSettings();
                done();
            },
            openDia(index, row) {
                this.messages = row;
                this.dialogTableVisible = true;
                /*点击弹框的时候 将当前选择的数据传给子组件.*/
            },
            ensure() {
                if(chooseType.verify(this.messages)) {
                    this.$message({message: '请填写完成所有的数据', type: 'error'});
                    return;
                }
                moduleUpdate(this.messages).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.moduleSettings();
                    this.dialogTableVisible = false;
                })
            },
            inputFocus(index, row) {
                this.sortNum = row.sort;
            },
            inputSort(index, row) {
                if (this.sortNum === row.sort) return;
                this.loading = true;
                moduleUpdate(row).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.moduleSettings();
                    this.loading = false;
                })
            },
            /*上传模块*/
            photoDia(row) {
                this.photoPic = row;
                this.dialogTableVisible1 = true;
                this.imageUrl = row.iconFull.path;
            },
            ensureS() {
                this.fall = this.photoPic;
                moduleUpdate(this.photoPic).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.moduleSettings();
                    this.dialogTableVisible1 = false
                })
            },
            /*图片上传*/
            handleAvatarSuccess(file) {
                console.log(file);
                this.photoPic.icon.path = file.data.path;
                this.photoPic.iconFull.path = this.imageUrl = file.data.pathFull;
            },
            handleAvatarSuccessAdd(file) {
                console.log(file);
                this.addForm.icon.path = file.data.path;
                this.imageUrlAdd = file.data.pathFull;
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /*开关*/
            tableStatus(row) {
                this.loading = true;
                moduleUpdate(row).then((res) => {
                    this.loading = false;
                    this.$message({message: res.message, type: 'success'});
                    this.moduleSettings();
                })
            },
            /*跳转*/
            skip(row) {
                if(row.moduleType === "customer") {
                    this.$router.push('/appHomeSetting/' + row.moduleType + '/' + row.id);
                } else {
                    this.$router.push('/appHomeSetting/' + row.moduleType);
                }
            },
            handleAdd() {
                this.dialogTableAdd = true;
                this.addForm = {
                    title: '',
                    sort: '99',
                    status: 1,
                    type: 0,
                    value: '',
                    icon: {
                        path: ''
                    }
                }
            },
            addSure() {
                if (this.imageUrlAdd === '' || this.addForm.title === '') {
                    this.$message({message: '请输入所有内容', type: 'error'});
                    return;
                }
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    moduleAdd(this.addForm).then((res) => {
                        this.dialogTableAdd = false;
                        this.$message({message: res.message, type: 'success'});
                        this.moduleSettings();
                    })
                })
            },
            skipDel(row) {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    let para = {id: row.id};
                    let id = row.id;
                    moduleDelete(id, para).then((res) => {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.moduleSettings();
                    })
                })
            },
            //选择样式
            chooseStyle(row) {
                moduleUpdate(row).then((res) => {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                })
            },
            inputFocusTitle(row) {
                this.checkTitle = row.title;
            },
            //编辑标题
            inputTitle(row) {
                if (this.checkTitle === row.title) return;
                moduleUpdate(row).then((res) => {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                })
            },
        },
        mounted() {
            this.moduleSettings();
        },
        computed: {
            ...mapState(['typeList']),
        },
        components: {
            type
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #apphomes {
        .el-table {
            text-align: center;
        }
        .toolbar {
            text-align: left;
        }
        .homeType {
            width: 100%;
            height: 100%;
            cursor: pointer;
            padding: 1px;
        }
        .mainImg {
            width: 50px;
            height: 50px;
        }
        .iconImg {
            cursor: pointer;
            img {
                vertical-align: middle;
                padding: 20px;
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #20a0ff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .collapse img{
            width: 100%;
        }
    }
</style>